<template>
  <!--添加题目-->

  <!-- 主体 -->
  <el-tabs v-model="activeName" @tab-click="changeTabs">
    <el-dialog
      :visible.sync="changeStoreVisible"
      class="taskDialog delete-shortcut-dialog"
      width="420px"
      :modal="false"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template slot="title">
        <span style="font-size:16px;font-weight:400;">
          <i
            class="iconfont icon-warning"
            style="font-size:20px;color:rgba(23,155,255,1);margin-right:5px;"
          ></i>是否改变选项值
        </span>
      </template>
      <p class="tips-text" style="height: 38px;">
        <span style="color:red;font-size:14px;">改变选项值，</span>是否继续?
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeStoreCancle">取 消</el-button>
        <el-button type="primary" @click="changeStoreForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-tab-pane label="手动录入" name="tabsHandInput">
      <h2>请先选择试题类型在进行操作</h2>
      <el-form ref="elForm" :model="mainForm">
        <!-- 数据分类 -->
        <el-row :gutter="15">
          <el-col :span="4">
            <el-form-item label="题库分类">
              <paper-ku v-model="mainForm.repositoryId"></paper-ku>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="题目类型">
              <el-select v-model="mainForm.type" placeholder="请选择">
                <el-option
                  v-for="(item, index) in shitiType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="题目难度">
              <el-select placeholder="请选择题目难度" clearable v-model="mainForm.level">
                <el-option
                  v-for="(item, index) in hardOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 这里是试题内容 -->

        <div class="jt-add--type">
          <h2>{{mainForm.type==0?'选择题：(根据下划线自动产生选项)': mainForm.type ==1 ? '填空：(根据下划线自动产生选项)':mainForm.type ==2? '判断':'简答' }}</h2>
          <el-form-item label="题目标题" style="margin-bottom: 123px; ">
            <editor :commits="mainForm.title" @func="getMsgFormSon" v-if="flag"></editor>
          </el-form-item>

          <!-- 选择题 -->

          <div v-if="mainForm.type==0">
            <div v-for="(value, key) in xuanZhe" :key="key">
              <h3>{{key+1}}</h3>
              <div class="jt-adds" v-for="(i,j) in value" :key="j">
                <el-form-item label="试题选项">
                  <el-input clearable v-model="i.content"></el-input>
                </el-form-item>
                <el-switch
                  v-model="i.is_true"
                  active-text="正确"
                  inactive-text="错误"
                  @change="changes(key,j,i)"
                ></el-switch>
              </div>
            </div>
          </div>

          <!-- 填空题 -->
          <div v-if="mainForm.type==1">
            <div v-for="(i,j) in mainForm.tianKu" :key="j">
              <h3>{{j+1}}</h3>
              <el-form-item label="试题答案">
                <el-input v-model="i.content" placeholder="请输入填空题的参考答案"></el-input>
              </el-form-item>
            </div>
          </div>

          <!-- 判断 -->
          <div v-if="mainForm.type==2">
            <el-form-item label="是否为正确">
              <el-switch v-model="mainForm.isTrue" active-text="正确" inactive-text="错误"></el-switch>
            </el-form-item>
          </div>

          <div v-if="mainForm.type==3">
            <el-form-item label="请输入题干">
              <editor :commits="mainForm.content" @func="getMsgFormSons" v-if="flag"></editor>
            </el-form-item>
          </div>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="题目解析">
              <el-input type="textarea" placeholder="请输入题目解析" v-model="mainForm.explain"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

   

        <el-form-item>
          <el-button type="primary" @click="submitForm(1)">确定</el-button>
          <el-button type="primary">保存并继续</el-button>
          <el-button @click="submitForm(99)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="批量导入" name="tabsBatchImport">此功能将在下一版本推出，敬请关注！</el-tab-pane>
  </el-tabs>
</template>

<script>
import SingleUpload from "@/components/upload/singleUpload";
import editor from "@/components/editor";
import PaperKu from "@/components/question/PaperKu";

export default {
  components: {},

  computed: {
     mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
  },
  data() {
    return {
      input: "a",
      activeName: "tabsHandInput",
      changeStoreVisible: true,
      beforeStorageValue: "", // 中介值
      afterStorageValue: "",
      flag: true,
      mainForm: {
        repositoryId: 0,
        type: "0",
        title: "",
        content: "",
        imageUrl: "",
        answerRight: "",
        explain: "",
        level: "0",
        xuanZhe: [],
        isAnswers: [],
        tianKu: [],
        isTrue: false,
      },

      XuanNum: 0,
      xuanZhe: [],
      hardOptions: [
        {
          label: "简单",
          value: "0",
        },
        {
          label: "普通",
          value: "1",
        },
        {
          label: "困难",
          value: "2",
        },
      ],
      shitiType: [
        {
          label: "选择",
          value: "0",
        },
        {
          label: "填空",
          value: "1",
        },
        {
          label: "判断",
          value: "2",
        },
        {
          label: "简答",
          value: "3",
        },
      ],
    };
  },

  components: {
    SingleUpload,
    editor,
    PaperKu,
  },
  created() {
    if (this.types != this.mainForm.type) {
      this.types = this.mainForm.type;
    }
  },
 
  watch: {
    XuanNum: {
      handler(newName, oldName) {
        if (this.mainForm.type == 0) {
          if (newName >= oldName) {
            this.xuanZhe.push([
              {
                content: "abc",
                is_true: true,
              },
              {
                content: "eng",
                is_true: false,
              },
              {
                content: "bbq",
                is_true: false,
              },
              {
                content: "123",
                is_true: false,
              },
            ]);
          } else {
            this.xuanZhe.pop();
          }
        }
        if (this.mainForm.type == 1) {
          if (newName >= oldName) {
            this.mainForm.tianKu.push({
              content: "abc",
            });
          } else {
            this.mainForm.tianKu.pop();
          }
        }
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true,
    },
    "mainForm.type": {
      immediate: true,
      handler(val, old) {
        console.log("val:", val, "old:", old);

        if (old != undefined) {
          if (this.beforeStorageValue) {
            console.log(
              "val:",
              val,
              "old:",
              old,
              "this.beforeStorageValue",
              this.beforeStorageValue
            );
            if (val !== this.beforeStorageValue) {
              this.changeStoreVisible = true;
            }
          }
        }
        if (old == 1) {
        }
      },
    },
  },
  created() {},
  mounted() {
    this.beforeStorageValue = this.mainForm.type;
  },
  methods: {
    changeStoreCancle() {
      this.mainForm.type = this.beforeStorageValue;

      this.changeStoreVisible = false;
    },
    changeStoreForm() {
      console.log(this.mainForm.type);
      if (this.mainForm.type == 1) {
        this.mainForm.title = "";
      }
      this.beforeStorageValue = this.mainForm.type; // 确定更改后使中介值等于目前框内的值，这样下次确定改变取消的话，可以回到现在的值
      this.changeStoreVisible = false;
    },
    changeTabs(tab) {
      this.activeName = tab.name;
    },
    submitForm(id) {
      if (id == 1) {
        console.log(this.mainForm);

        if (this.mainForm.type == 0) {
          this.xuanZhe.forEach((item) => {
            item.forEach((j, k) => {
              if (j.is_true == true) {
                this.mainForm.isAnswers.push(String.fromCharCode(65 + k));
              }
            });
            this.mainForm.xuanZhe.push(item);
          });
        }

        this.$http({
          url: this.$http.adornUrl(`/question/addQuestion`),
          method: "post",
          data: this.$http.adornData(this.mainForm, false),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },

    currentSel(selVal) {
      this.types = selVal;
    },

    changes(i, j, k) {
      let num = 0;
      this.xuanZhe[i].forEach((element) => {
        if (element.is_true == true) {
          num++;
        }
      });
      if (num == 0) {
        this.$message({
          message: "请你至少选择一个为正确选项",
          type: "warning",
        });
        k.is_true = true;
      } else {
        this.xuanZhe[i]
          .filter((item) => {
            return item != k;
          })
          .forEach((j) => {
            j.is_true = false;
          });
      }
    },

    getMsgFormSon(data) {
      this.mainForm.title = data;

      this.XuanNum = this.getCharCount(data, "__");
    },

    getMsgFormSons(data) {
      this.mainForm.content = data;
    },
    getCharCount(str, char) {
      var regex = new RegExp(char, "g"); // 使用g表示整个字符串都要匹配
      var result = str.match(regex); //match方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
      var count = !result ? 0 : result.length;
      return count;
    },
  },
};
</script>

<style lang="scss" scoped>
.approvalStage {
  background-color: #fff;
  padding: 20px;
  padding-bottom: 40px;
  border-radius: 4px;
}
</style>